<template>
<div>

  <el-tabs v-model="activeName">
    <el-tab-pane :label="'未处理告警（'+waitTableData.length+'）'" name="first">
      <el-button-group style="padding-bottom:5px;" >
        <el-button type="primary" icon="search" @click="showQueryDialog()">查询</el-button>
        <el-button type="primary" icon="edit" @click="batchHandle()">处理</el-button>
        <el-button type="primary" icon="caret-right" @click="batchIgnore()">忽略</el-button>
        <el-button type="primary" icon="refresh" @click="queryWait()">刷新</el-button>

      </el-button-group>
      <el-table :data="waitTableData" stripe       @selection-change="waitSelectionChange"
      height='520'>
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column prop="time" label="最新时间" width="180">
          <template scope="scope">
                  {{dateFormatter(scope.row.time)}}
          </template>
            </el-table-column>

        <el-table-column prop="clevel" label="级别" width="100">
        </el-table-column>

        <el-table-column prop="name" label="设备名称" width="180">
        </el-table-column>

        <el-table-column prop="eventcount" label="告警次数" width="100">
        </el-table-column>



            <el-table-column
              prop="description"
              label="问题描述">
            </el-table-column>

            <el-table-column
                v-if="activeName!='third'"
                fixed="right"
                label="操作">
                <template scope="scope">
                <el-button @click="firstBtnClick(waitTableData[scope.$index])" type="primary" size="small">
                  处理
                </el-button>
                <el-button @click="secondBtnClick(waitTableData[scope.$index])" type="primary" size="small">
                  忽略
                </el-button>
                </template>
            </el-table-column>
          </el-table>
    </el-tab-pane>
    <el-tab-pane :label="'处理中告警（'+doingTableData.length+'）'" name="second">
      <el-button-group style="padding-bottom:5px;">
        <el-button type="primary" icon="search" @click="showQueryDialog()">查询</el-button>
        <el-button type="primary" icon="edit" @click="batchClose()">关闭</el-button>
        <el-button type="primary" icon="refresh" @click="queryDoing()">刷新</el-button>

      </el-button-group>
  <el-table :data="doingTableData"
      stripe
      @selection-change="doingSelectionChange"
       height='520'>
       <el-table-column
         type="selection"
         width="55">
       </el-table-column>
             <el-table-column
               prop="time"
               label="最新时间"
               width="180">
               <template scope="scope">
                {{dateFormatter(scope.row.time)}}
               </template>
             </el-table-column>


       <el-table-column prop="clevel" label="级别" width="100">
       </el-table-column>

      <el-table-column
        prop="name"
        label="设备名称"
        width="180">
      </el-table-column>

      <el-table-column
        prop="eventcount"
        label="告警次数"

        width="100">
      </el-table-column>

      <el-table-column
        prop="description"
        label="问题描述">
      </el-table-column>
      <el-table-column type="expand">
        <template scope="props">
        <el-form label-position="left" class="demo-table-expand">
          <el-form-item label="处理记录：">
            <div style="float:left">
              <div v-for="(item,i) in (props.row.remark).split(',')">
                {{item}}
              </div>
            </div>
          </el-form-item>
        </el-form>
        </template>
        </el-table-column>
      <el-table-column
          fixed="right"
          label="操作">
          <template scope="scope">
          <el-button @click="firstBtnClick(doingTableData[scope.$index])" type="primary" size="small">
            备注
          </el-button>
          <el-button @click="secondBtnClick(doingTableData[scope.$index])" type="primary" size="small">
            关闭
          </el-button>
          </template>
      </el-table-column>
    </el-table>
    </el-tab-pane>
    <el-tab-pane :label="'已处理告警（'+doneTableData.length+'）'" name="third">

      <el-button-group style="padding-bottom:5px;">
        <el-button type="primary" icon="search" @click="showQueryDialog()">查询</el-button>
        <el-button type="primary" icon="refresh" @click="queryDone()">刷新</el-button>

      </el-button-group>

  <el-table :data="doneTableData"
      stripe

       height='520'>
       <el-table-column
         type="selection"
         width="55">
       </el-table-column>
       <el-table-column
         prop="time"
         label="最新时间"
         width="180">
         <template scope="scope">
          {{dateFormatter(scope.row.time)}}
         </template>
       </el-table-column>

       <el-table-column prop="clevel" label="级别" width="100">
       </el-table-column>

      <el-table-column
        prop="name"
        label="设备名称"
        width="180">
      </el-table-column>

      <el-table-column
        prop="eventcount"
        label="告警次数"

        width="100">
      </el-table-column>


      <el-table-column
        prop="description"
        label="问题描述">
      </el-table-column>
      <el-table-column type="expand">
        <template scope="props">
        <el-form label-position="left" class="demo-table-expand">
          <el-form-item label="处理记录：">
            <div style="float:left">
              <div v-for="(item,i) in (props.row.remark).split(',')">
                {{item}}
              </div>
            </div>
          </el-form-item>
        </el-form>
        </template>
        </el-table-column>
    </el-table>
    </el-tab-pane>
  </el-tabs>
  <el-dialog modal v-model="queryDialogVisible">
    <el-form  :model="queryForm" ref="queryForm" label-width="100px" >
      <el-form-item label="告警等级" prop="clevel">
        <el-select v-model="queryForm.clevel">
          <el-option v-for="item in clevelClassify" :label="item.label" :value="item.value" :key="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="最新时间" prop="name">
        <el-date-picker
            v-model="queryForm.timeRange"
            type="daterange"
            align="right"
            placeholder="选择日期范围"
            :picker-options="pickerOptions">
          </el-date-picker>
      </el-form-item>

      <el-form-item label="设备名称" prop="name">
        <el-input v-model="queryForm.name"></el-input>
      </el-form-item>
      <el-form-item label="问题描述" prop="description">
        <el-input  v-model="queryForm.description"></el-input>
      </el-form-item>


    </el-form>
    <div style="padding-bottom:5px;float:right" >
      <el-button type="primary" icon="search" size="small" @click="queryDataByCondition()">查询</el-button>
      <el-button type="primary" icon="cancel" size="small" @click="queryDialogVisible = false">取消</el-button>
    </div>
  </el-dialog>



</div>
</template>

<script>
import api from 'api/graph.js'
import alarmApi from 'api/alarm.js'
export default {
  components: {},
  data: function() {
    return {
      activeName: "first",
      waitTableData: [],
      doingTableData: [],
      doneTableData: [],
      selectWait:[],
      selectDoing:[],
      queryDialogVisible:false,
      queryForm:{
        clevel:"",
        name:"",
        description:"",
        timeRange:[]
      },
      clevelClassify:[
        {label:"未分类",value:"0",id:"0"},
        {label:"信息",value:"1",id:"1"},
        {label:"警告",value:"2",id:"2"},
        {label:"一般严重",value:"3",id:"3"},
        {label:"严重",value:"4",id:"4"},
        {label:"灾难",value:"5",id:"5"}
      ],
      pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        }
    };
  },
  methods: {
  queryData() {
      this.queryWait();
      this.queryDoing();
      this.queryDone();
  },
  queryDataByCondition(){
    var params = this.queryForm;
    var timeRange = this.queryForm.timeRange;
    if(timeRange.length==2&&timeRange[0]&&timeRange[1]){
      var begin = timeRange[0].getTime()/1000;
      var end = timeRange[1].getTime()/1000;
      params.timeBegin=begin;
      params.timeEnd=end;
    }
    if(this.activeName=='first'){
      this.queryWait(params);
    }else if(this.activeName=='second'){
      this.queryDoing(params);
    }else if(this.activeName=='third'){
      this.queryDone(params);
    }
    this.queryDialogVisible = false;
  },
  queryDoing(params){
    var dataKey = "wait-ac-warn.name";
    if(!params){
      params = {
        "status": 'doing'
      };
      if(this.$refs["queryForm"])this.$refs["queryForm"].resetFields();
    }else{
      params.status ='doing';
    }
    api.viewData(dataKey,params).then((response) => {
      this.doingTableData = response.data;
    }).catch((err) => {
      console.error(err);
    });
  },
  queryDone(params){
    var dataKey = "wait-ac-warn.name";
    if(!params){
      params = {
        "status": 'done'
      };
      if(this.$refs["queryForm"])this.$refs["queryForm"].resetFields();
    }else{
      params.status ='done';
    }
    api.viewData(dataKey,params).then((response) => {
      this.doneTableData = response.data;
    }).catch((err) => {
      console.error(err);
    });
  },
  queryWait(params){
    var dataKey = "wait-ac-warn.name";
    if(!params){
      params = {
        "status": 'wait'
      };
      if(this.$refs["queryForm"])this.$refs["queryForm"].resetFields();
    }else{
      params.status ='wait';
    }
    api.viewData(dataKey,params).then().then((response) => {
      this.waitTableData = response.data;
    }).catch((err) => {
      console.error(err);
    });
  },
  dateFormatter(str) {
    var date = new Date(parseInt(str, 10));
    var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
    var currentDate = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
    var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
    var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
    var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
    return date.getFullYear() + "-" + month + "-" + currentDate + " " + hours + ":" + minutes + ":" + seconds;
  },
  firstBtnClick(row) {
    if (this.activeName == 'first') {
      this.handle(row);
    } else if (this.activeName == 'second') {
      this.remark(row);
    }
  },
  secondBtnClick(row) {
    if (this.activeName == 'first') {
      this.ignore(row);
    } else if (this.activeName == 'second') {
      this.closeEvents(row);
    }
  },
  handle(row) {
    var params = {
      triggerids: row.id,
      message: "确认告警。",
      action: "0",
      acknowledged:"0"
    };
    alarmApi.acknowledge(params).then((response) => {
      this.$message({
        type: 'info',
        message: "确认成功，告警进入处理状态。"
      });
      this.queryData();
    }).catch((err) => {
      console.error(err);
    });
  },
  ignore(row) {
    this.$prompt('请输入备注，确定忽略问题', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消'
    }).then(({
      value
    }) => {
      var params = {
        triggerids: row.id,
        message: "忽略问题：" + value,
        action: "1",
        acknowledged:"0"
      };
      alarmApi.acknowledge(params).then((response) => {
        this.queryData();
      }).catch((err) => {
        console.error(err);
      });
    }).catch(() => {

    });
  },
  closeEvents(row) {
    this.$prompt('请输入备注，确定关闭问题', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消'
    }).then(({value}) => {
      var params = {
        triggerids: row.id,
        message: "关闭问题：" + value,
        action: "1",
        acknowledged:"1"
      };
      alarmApi.acknowledge(params).then((response) => {
        this.queryData();
      }).catch((err) => {
        console.error(err);
      });
    }).catch((err) => {
      console.error(err);
    });
  },
  remark(row) {
    this.$prompt('请输入备注', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消'
    }).then(({value}) => {
      var params = {
        triggerids: row.id,
        message: "备注：" + value,
        action: "0",
        acknowledged:"1"
      };
      alarmApi.acknowledge(params).then((response) => {
        this.queryData();
      }).catch((err) => {
        console.error(err);
      });
    }).catch((err) => {
        console.error(err);
    });
  },
  waitSelectionChange(v){
    this.selectWait = v;
  },
  doingSelectionChange(v){
    this.selectDoing = v;
  },
  showQueryDialog(){
    this.queryDialogVisible = true;
  },
  batchHandle(){
    if(this.selectWait.length==0){
      this.$message({
        type: 'info',
        message: "至少选中一条待处理的告警记录。"
      });
      return false;
  }else{
    this.handle({
      id:this.getIdsFromRow(this.selectWait)
    });
  }
  },
  batchIgnore(){
    if(this.selectWait.length==0){
      this.$message({
        type: 'info',
        message: "至少选中一条待处理的告警记录。"
      });
      return false;
    }else{
          this.ignore({
            id:this.getIdsFromRow(this.selectWait)
          });
    }

  },
  batchClose(){
    if(this.selectDoing.length==0){
      this.$message({
        type: 'info',
        message: "至少选中一条处理中的告警记录。"
      });
      return false;
    }else{
      this.closeEvents({
        id:this.getIdsFromRow(this.selectDoing)
      });
    }
  },
  getIdsFromRow(json){
    var idArray = [];
    for(var i=0;i<json.length;i++){
      idArray.push(json[i].id);
    }
    return idArray.toString();
  }
},
mounted: function() {
  this.queryData();
}
}
</script>


<style>

</style>
